<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>chat</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <script src="/static/jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="container" style="border: 1px solid black; width: 400px;height: 400px;
    float: left">
    <div id="content" style="height: 350px">

    </div>
    <div style="border-top: 1px solid black;width: 400px;height: 50px">
        <input id="msg" />
        <button onclick="send()">send</button>
    </div>
</div>
<div id="userList" style="border: 1px solid black;width: 100px;height: 400px;
    float: left">

</div>
<script>
    window.onload = function () {
        //进入聊天室就打开一个socket通道
        connect();
    }
    var ws = null;//一个ws对象就是一个通信管道

    function setConnected(connected) {
//        document.getElementById('connect').disabled = connected;
//        document.getElementById('disconnect').disabled = !connected;
//        document.getElementById('echo').disabled = !connected;
    }

    var username = "${sessionScope.username}";

    function connect() {
        var target = "ws://127.0.0.1:8080/chatSocket?username="+username;
        if ('WebSocket' in window) {
            ws = new WebSocket(target);
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(target);
        } else {
            alert('WebSocket is not supported by this browser.');
            return;
        }
        ws.onopen = function () {
            //setConnected(true);
           //log('Info: WebSocket connection opened.');
        };
        ws.onmessage = function (event) {
            //log('Received: ' + event.data);
            eval("var msg="+event.data+";");
            if(undefined != msg.welcome){
                $("#content").append(msg.welcome+"<br/>");
            }
            if(undefined != msg.usernames){
                $("#userList").html("");
                $(msg.usernames).each(function () {
                        $("#userList").append("<input type='checkbox' value='"+this+"' />"+this+"<br/>");
                    }
                );
            }
            if(undefined != msg.content){
                $("#content").append(msg.content+"<br/>");
            }
        };
        ws.onclose = function (event) {
            //setConnected(false);
            //log('Info: WebSocket connection closed, Code: ' + event.code + (event.reason == "" ? "" : ", Reason: " + event.reason));
        };
    }

    function disconnect() {
        if (ws != null) {
            ws.close();
            ws = null;
        }
        setConnected(false);
    }

    function send() {
        if (ws != null) {
//            var message = document.getElementById('msg').value;
//            ws.send(message);
//            $("#msg").val("");
            var val = $("#msg").val();
            $("#msg").val("");
            var ss = $("#userList :checked");
            var to = $("#userList :checked").val();
            var obj = null;
            if(ss.size() == 0){
                obj = {
                    msg : val,
                    type:1//1 广播 2 单聊
                };
            }else{
                obj = {
                    to : to,
                    msg : val,
                    type:2//1 广播 2 单聊
                };
            }
            ws.send(JSON.stringify(obj));
        } else {
            alert('WebSocket connection not established, please connect.');
        }
    }
</script>
</body>
</html>
